<template>
  <div class="page-header-index-wide">
    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs v-show="showTab1" default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
          </div>
          <a-tab-pane loading="true" tab="公司" key="1">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <my-line @changeYear="changeYearCo" title="金额（元）" :data="contractYearNum" />
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <my-rank-list title="各季度净利润（元）" :list="quarterlyProfitList"/>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="部门" key="2">
            <a-row>
              <a-col :xl="24" :lg="12" :md="12" :sm="24" :xs="24">
                <my-bar @changeYear="changeYearDep" :data="depContractNum" title="各部门合同金额（元）" />
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
        <a-tabs v-show="!showTab1" default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
          </div>
          <a-tab-pane loading="true" tab="部门" key="1">
            <a-row>
              <a-col :xl="24" :lg="12" :md="12" :sm="24" :xs="24">
                <my-bar @changeYear="changeYearDep" :data="depContractNum" title="各部门合同金额（元）" />
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
  </div>
</template>

<script>
import { ChartCard, RankList, Trend } from '@/components'
import { mixinDevice } from '@/utils/mixin'
import { MyBar, MyLine, MyMiniArea, MyMiniBar, MyMiniProgress, MyRankList, MyDoubleBar } from '../../myComponents/Charts'
import * as api from '@/api/statistics'
import MyMiniLine from '@/myComponents/Charts/MyMiniLine'
import { mapGetters } from 'vuex'

const DataSet = require('@antv/data-set')

export default {
  name: 'IndexAnalysis',
  mixins: [mixinDevice],
  components: {
    MyMiniLine,
    ChartCard,
    RankList,
    Trend,
    MyLine,
    MyBar,
    MyMiniArea,
    MyMiniBar,
    MyMiniProgress,
    MyRankList,
    MyDoubleBar
  },
  data () {
    return {
      contractYearNum: [],
      miniLineData: [],
      miniBarData: [],
      depContractNum: [],
      quarterlyProfitList: [],
      loading: true,
      showTab1: true
    }
  },
  computed: {
    ...mapGetters(['roles']),

    totalContractNum: function () {
      let num = 0
      this.miniLineData.forEach(item => {
        num += item['个数']
      })
      return num
    },
    // 月平均合同
    avgMonthNum: function () {
      let totalNum = 0
      this.miniLineData.forEach((item) => { totalNum += item['个数'] })
      return (totalNum / this.miniLineData.length).toFixed(2)
    },
    avgDepNum: function () {
      let totalNum = 0
      this.miniBarData.forEach((item) => { totalNum += item['个数'] })
      return (totalNum / this.miniBarData.length).toFixed(2)
    }
  },
  beforeCreate () {
    const thisYear = new Date().getFullYear()
    setTimeout(() => {
      console.log('roles', this.roles)
      if (this.roles.name === '部门经理') {
        this.showTab1 = false
      }
      // 公司月份折线图数据
      api.sumContractNatureByYear({
        year: thisYear
      }).then(res => {
        console.log('月份折线图', res.result)
        const dv = new DataSet.View().source(res.result)
        dv.transform({
          type: 'fold',
          fields: ['收入', '支出', '利润'],
          key: 'dataType',
          value: 'amount'
        })
        this.contractYearNum = dv.rows

        const rankList = []
        let One = 0
        let Two = 0
        let Three = 0
        let Four = 0
        res.result.forEach((item, index) => {
          if (index < 3) {
            One += item['利润']
          }
          if (index > 3 && index < 6) {
            Two += item['利润']
          }
          if (index > 6 && index < 9) {
            Three += item['利润']
          }
          if (index > 9 && index < 12) {
            Four += item['利润']
          }
        })
        rankList.push({ name: '第一季度', total: One })
        rankList.push({ name: '第二季度', total: Two })
        rankList.push({ name: '第三季度', total: Three })
        rankList.push({ name: '第四季度', total: Four })
        this.quarterlyProfitList = rankList
      })
      // 部门柱状图数据
      api.sumContractNatureByYearAndDep({
        year: thisYear
      }).then(res => {
        console.log('部门柱状图', res.result)
        if (res.result.length === 0) {
          this.$message.info('没有部门统计数据')
        }
        /*
        const dv = new DataSet.View().source(res.result)
        dv.transform({
          type: 'fold',
          fields: ['金融科技与服务', '国资与企业管控', '总经理室', '市场与成果转化部', '综合管理部'],
          key: 'x',
          value: 'y'
        })
        this.depContractNum = dv.rows
        */
        this.depContractNum = res.result
      })
      this.loading = !this.loading
    }, 1000)
  },
  created () {
  },
  mounted () {
  },
  methods: {
    changeYearCo (e) {
      api.sumContractNatureByYear({
        year: e
      }).then(res => {
        console.log('月份折线图', res.result)
        const dv = new DataSet.View().source(res.result)
        dv.transform({
          type: 'fold',
          fields: ['收入', '支出', '利润'],
          key: 'dataType',
          value: 'amount'
        })
        this.contractYearNum = dv.rows
        console.log('contractYearNum:', this.contractYearNum)

        const rankList = []
        let One = 0
        let Two = 0
        let Three = 0
        let Four = 0
        res.result.forEach((item, index) => {
          if (index < 3) {
            One += item['利润']
          }
          if (index > 3 && index < 6) {
            Two += item['利润']
          }
          if (index > 6 && index < 9) {
            Three += item['利润']
          }
          if (index > 9 && index < 12) {
            Four += item['利润']
          }
        })
        rankList.push({ name: '第一季度', total: One })
        rankList.push({ name: '第二季度', total: Two })
        rankList.push({ name: '第三季度', total: Three })
        rankList.push({ name: '第四季度', total: Four })
        this.quarterlyProfitList = rankList
      })
    },
    changeYearDep (e) {
      api.sumContractNatureByYearAndDep({
        year: e
      }).then(res => {
        console.log('部门柱状图', res.result)
        if (res.result.length === 0) {
          this.$message.info('没有部门统计数据')
        }
        const dv = new DataSet.View().source(res.result)
        dv.transform({
          type: 'fold',
          fields: ['金融科技与服务', '国资与企业管控', '总经理室', '市场与成果转化部', '综合管理部'],
          key: 'x',
          value: 'y'
        })
        this.depContractNum = dv.rows
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .antd-pro-pages-dashboard-analysis-twoColLayout {
    position: relative;
    display: flex;
    display: block;
    flex-flow: row wrap;
  }

  .antd-pro-pages-dashboard-analysis-salesCard {
    height: calc(100% - 24px);
    /deep/ .ant-card-head {
      position: relative;
    }
  }

  .dashboard-analysis-iconGroup {
    i {
      margin-left: 16px;
      color: rgba(0,0,0,.45);
      cursor: pointer;
      transition: color .32s;
      color: black;
    }
  }
  .analysis-salesTypeRadio {
    position: absolute;
    right: 54px;
    bottom: 12px;
  }
</style>
